<template>
	<view class="">
		<u-form-item :label="item.label">
			<u-button type="flex1" class="" :showborder="false" :textleft="true" @click="btntap()">
				<view class="u-flex u-flex-between btntext">
					<view class="">{{ showvalue }}</view>
					<view class="icon u-flex u-flex-center">
						<u-icon name="arrow-down" size="20"></u-icon>
					</view>
				</view>
			</u-button>
		</u-form-item>
		<u-select :mask-close-able="false" v-model="show" :defaultValue="defaultValue" :list="options"
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				typeof: [String, Number],
				default: "0",
			},
			item: {
				typeof: Object,
				default: () => {
					return {
						value: "type",
						label: this.$z.$t("分润模式"),
						type: "select",
						option: [{
								value: "0",
								label: this.$z.$t("普通分润"),
							},
							{
								value: "1",
								label: this.$z.$t("电费服务费模式"),
							},
						],
					};
				},
			},
			formdata: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			disabled: {
				typeof: Boolean,
				default: false,
			},
		},
		data() {
			return {
				show: false,
			};
		},
		mounted() {
			this.init();
		},
		computed: {
			formdatainput() {
				return this.$u.deepClone(this.formdata);
			},
			defaultValue() {
				let optioni = this.options.findIndex((e) => {
					return e.value == this.value;
				});
				if (optioni == -1) {
					return;
				}
				return [Number(optioni)];
			},
			options() {
				let r = this.item.option;
				if (typeof r == "function") {
					r = r(this.formdatainput);
				}
				return r;
			},
			showvalue() {
				let option = this.options.find((e) => {
					return e.value == this.value;
				});
				return option ? option.label : this.value || this.$z.$t("请选择");
			},
		},
		methods: {
			async init() {
				if (this.item.defaultValue) {
					let option = this.options.find((e) => {
						return e.value == this.value;
					});
					if (!option) {
						this.$emit("input", this.item.defaultValue);
					}
				}
			},
			btntap() {
				if (this.disabled) {
					return;
				}
				this.show = !this.show;
			},
			confirm(e) {
				this.$emit("input", e[0].value);
			},
		},
	};
</script>

<style lang="scss">
	.btntext {
		flex: 1;
	}

	.icon {
		width: 88rpx;
		height: 88rpx;
	}
</style>